body, html {
    margin: 0;
    padding: 0;
}

/* 屏幕大小自适应，代码来自https://www.tailwindcss.cn/docs/height */
/* h-screen	height: 100vh; */
/* w-screen	width: 100vw; */
/* 接下来就能使用，height:100%;width:100%，了 */
/* 不能使用*{}，只能使用选择器，放到div上，不然所有div都会继承全屏 */
/* 注意el-col是不能使用这个的，因为有个span，只能在el-row上使用，不然el-col不会继承父div高宽 */

.screen {
    height: 100vh;
    width: 100vw;
}

/**
    element-plus的布局继承：
        div高宽盒子[el-row盒子独立但能继承div的高宽[el-col盒子独立不能继承el-row，因此不能继承div[span控制]]]
    element-plus的居中，源自justify和align
        <el-row style="height: 100%;width: 100%" :justify="'center'" :align="'middle'">
*/

/**
    flex的盒子模型，就是父div需要设置一个固定的高宽，第一个子div继承父div高宽，就能使用百分比，依次继承上一个div的高宽，通过margin去控制边界
    div0                    // 父div设置固定高宽 h-screen,w-screen
        --div1              // 继承父div0
            --div1.1        // 继承div1，不继承div0
            --div1.2        // 继承div1
                --div1.2.1  // 继承div1.2
        --div2
            --div2.1
        --div3
            --div3.1

     *.如果div1.2设置了百分比高宽，下一个div1.2.1需要margin则需要在div1.2.1上标记，区分好每个盒子
     *.使用flex，margin不会挤压盒子，而是会铺平盒子，很方便
 */
